<template>
  <div class="area-list-view">

    <template v-for="(area,index) in list">

      <div
          v-if="index < 2 || list.length == 3"
          :key="index"
          class="area-item"
      >

        <p class="area-text">{{ area }}</p>

      </div>

      <div
          v-else-if="index === 3"
          :key="index+1"
          class="area-item"
      >

        <el-popover
            :width="200"
            placement="bottom"
            trigger="click"
        >
          <template #reference>
            <p class="area-text special">更多({{ list.length }})</p>
          </template>

          <div>
            <span>{{ areaStr }}</span>
          </div>
        </el-popover>
      </div>

    </template>

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, onMounted, ref, watch} from 'vue'

export default defineComponent({
  name: 'AreaView',
  props: {
    areas: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  setup(props, {}) {
    var list = ref([])
    var areaStr = ref('')
    const currentInstance = getCurrentInstance()

    const transformArea = (code) => {
      return ''
    }

    const dealData = () => {
      let str = ''
      list.value = []
      props.areas.forEach((a) => {
        str = str + '，'
        let name = a.provinceName
        if (a.areaName) {
          name = a.cityName + '/' + a.areaName
        } else if (a.cityName) {
          name = a.cityName
        }
        str = str + name
        list.value.push(name)
      })
      areaStr.value = str.replace('，', '')
    }

    watch(
        () => props.areas,
        (newval, oldval) => {
          if (newval) {
            dealData()
          }
        },
        {immediate: true, deep: true}
    )

    onMounted(() => {
    })

    return {
      list,
      areaStr,
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@CRM/assets/scss/components/areaListView.scss";
</style>
